<template>
	<div>
    <ul class="expired-coupon" v-if="expiredCoupons.coupons.length>0">
      <!-- 已过期优惠券列表-->
      <van-list
          v-model="loading"
          :finished="finished"
          :error.sync="error"
          error-text="请求失败，点击重新加载"
          finished-text=""
          @load="onLoad"
        >
        <li v-for="(couponItem,index) in expiredCoupons.coupons" :key="index" class="coupons-li">
          <!-- <a href=""> -->
            <div class="coupons-item">
              <section class="coupons-box coupon-overdue">
                <section class="coupon-left">
                  <h1 v-if="couponItem.promotion_type==1" class="coupon-price">{{couponItem.value}}<span class="txt">折</span></h1>
                  <h1 v-else class="coupon-price" v-html="scaleGoodsPriceFn(couponItem.value)"></h1>
                  <div v-if="couponItem.coupon_type!=3">
                    <p v-if="couponItem.at_least>0">满{{couponItem.at_least}}元使用</p>
                    <p v-else>不限订单金额</p>
                  </div>
                </section>
                <section class="coupon-right">
                  <section class="coupon-l">
                    <div class="name">
                      <h4>{{couponItem.title}}</h4>
                      <p>{{couponItem.start_time}} 至 {{couponItem.end_time}}</p>
                    </div>
                    <span class="explain">仅在有效时间内使用</span>
                  </section>
                  <section class="coupon-r">
                    <van-button class="btn expired-btn" color="#E6E6E6" round>已过期</van-button>
                  </section>
                </section>
              </section>
            </div>
          <!-- </a> -->
          <div class="coupon-tip" v-if="couponItem.description">{{couponItem.description}}</div>
          <!-- <a href="javascript:;" class="loadmore j-loadmore"><span>加载更多</span><i class="loadmore-icon"></i></a>
          <span class="loadmore loadmore-noMoreData j-noMoreData">没有更多数据</span>	 -->
        </li>
      </van-list>
    </ul>
    <div v-else>
      <no-data :noData=noData></no-data>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { getMyCoupon } from '@/api/user/member/memberApi'
import { scaleGoodsPrice } from '@/utils/index'
import noData from '@/components/noData/index'
export default Vue.extend({
  components: {
    noData
  },
  props: {
    expiredCoupons: {
      type: Object
    }
  },
  data() {
    return {
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/no-coupon.png',
        text: '暂无优惠券',
        marginTop: '80px'
      },
      loading: false,
      finished: false,
      error: false,
      p: 2
    }
  },
  methods: {
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className, 1)
    },
    onLoad() {
      // TODO first有值时代表第一次加载
      if (first) {
        this.p = 1
        this.finished = true
      }
      if(this.finished) return false
      this.loading = true
      const data = {
        p: this.p,
        type: 3
      }
      getMyCoupon(data)
        .then(res => {
          this.loading = false
          if (res.data.expired.length) {
            this.expiredCoupons.coupons.push(...res.data.expired)
            this.p++
          } else {
            this.finished = true
          }
        })
        .catch(() => {
          this.error = true
        })
    }
  }
})
</script>

<style lang="scss">
.expired-coupon{
  .coupons-li {
    .coupons-box{
      .coupon-right{
        .coupon-l{
          .name{
            h4{
              color: #999999;
            }
          }
          .explain{
            color: #999999;
          }
        }
      }
    }
  }
}
</style>